<template>
  <el-form ref="form" :model="form" label-width="80px">
    <!--    当前客户信息      comsuter   -->
    <el-form-item label="选择客户">
      <el-select v-model="form.customerId" filterable placeholder="请选择">
        <el-option
            v-for="item in customerList"
            :key="item.customerId"
            :label="item.customerName"
            :value="item.customerId">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="选择膳食备注">
      <el-select v-model="form.foodId" filterable placeholder="请选择">
        <el-option
            v-for="item in foodList"
            :key="item.foodId"
            :label="item.foodlabel"
            :value="item.foodId">
        </el-option>
      </el-select>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="save">立即创建</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </el-form-item>
  </el-form>



</template>



<script>
import service from "@/utils/request";

export default {
  data() {
    return {
      loading: false,
      form: {
        customerId:'',
        foodId:'',
      },
      customerList: [],
      foodList:[],
    }
  },

  methods: {
    onSubmit() {
      //this.form  --- checkin
      console.log('需要吧当前的表单提交给 controller 使用CustomerFood后端对象接受数据!',this.form);
    },
    //调用后端就 查询 列表
    queryBedList(){
      this.loading = true;
      service.post("/food/list", {}).then((res) => {
        this.foodList = res;
        this.loading = false
      }).catch((error) => {
        // 添加错误处理逻辑
        console.error("An error occurred:", error);
        this.loading = false;
      });
    },
    //调用axios 请求接口查询list
    queryCustomerList(){
      this.loading = true;
      service.post("/customer/list", {}).then((res) => {
        this.customerList = res;
        this.loading = false
      }).catch((error) => {
        // 添加错误处理逻辑
        console.error("An error occurred:", error);
        this.loading = false;
      });
    },
    save(){
      service.post("/customerFood/saveOrUpdate",this.form).then((res) => {
        const success = res
        if(success){
          this.$message.success("保存成功");
          this.closeDialog();
        }
      })
      this.queryList();
    },

    closeDialog() {
      this.$emit('closeDialog');
    },

  },
  created() {
    //查询所有的客户
    this.queryCustomerList()
    //查询所有的床位
    this.queryBedList()

  }
}
</script>
<style scoped>

</style>